<template>
  <div class="cart">
      <div class="cart_item" v-for="(item, index) in cart" :key="index">
        <div class="cart_item_checkbox">
          <input type="checkbox" class="cart_item_check" :checked="item.checked" @change="selectChange(item)" />
        </div>
        <div class="cart_item_container">
          <div class="cart_item_img">
            <img :src="item.pic" width="100%" height="100%" />
          </div> 
          <div class="cart_item_content">
            <div class="cart_item_name">{{item.name}}</div>
            <div class="cart_item_desc">{{item.desc}}</div>
            <div class="cart_item_count">
              <div class="cart_item_price">￥{{item.price}}</div>
              <div class="cart_item_num">
                <button class="cart_num_btn" @click="changeNum('minus', item)">-</button>
                <span class="cart_number">{{item.num}}</span>
                <button class="cart_num_btn" @click="changeNum('plus', item)">+</button>
              </div>
            </div>
          </div>
        </div>
      </div>

      <img src="../assets/cartNull.jpg" width="100%" v-show="this.cart.length <= 0">
      <div class="cart_submit" v-show="this.cart.length > 0">
        <div class="cart_sunmit_all">
          <input type="checkbox" :checked="checkedAll" @click="allSelect" /> 全选
        </div>
        <div class="cart_submit_total">
          <div class="cart_total_num">合计:￥{{total}}</div>
          <div class="cart_total_btn" @click="pulate">{{subtext}}</div>
        </div>
      </div>
  </div>
</template>

<script>
import mixin from '../store/index'
export default {
  mixins: [mixin],
  data() {
    return {
    }
  },
  methods: {
    // 数量改变计算价格
    changeNum(key, item) {
      this.onNum({
        key,
        name: item.name
      })
    },
    // 选中单个计算价格
    selectChange(item) {
      this.onSelect({
        checked: event.target.checked,
        name: item.name
      })
    },
    // 全部选中
    allSelect() {
      this.onAllSelect(event.target.checked)
    },
    // 编辑删除操作
    pulate() {
      this.onPulate()
    },
  }
}
</script>

<style scoped>
.cart {
  margin-top: 1.2rem;
}
.cart_item {
  width: 100%;
  height: 2rem;
  display: flex;
  justify-content: space-between;
}
.cart_item_checkbox {
  flex: 2;
}
.cart_item_check {
  margin-top: 0.5rem;
  margin-left: 0.2rem;
  width: 0.3rem;
  height: 0.3rem;
}
.cart_item_container {
  flex: 18;
  display: flex;
  justify-content: space-between;
}
.cart_item_img {
  width: 25%;
  height: 1.8rem;
}
.cart_item_content {
  width: 70%;
}
.cart_item_desc {
  font-size: 0.2rem;
  color: #666;
  margin: 0.2rem 0;
}
.cart_item_count {
  width: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart_item_price {
  width: 60%;
  font-size: 0.28rem;
  color: red;
}
.cart_item_num {
  width: 40%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart_num_btn {
    display: inline-block;
    width: 1.8em;
    height: 1.8em;
    margin: 0 0.1rem;
    background-color: #eee;
    border: none;
    outline: none;
}
.cart_submit {
  width: 100%;
  height: 1rem;
  line-height: 1rem;
  position: fixed;
  bottom: 1.2rem;
  left: 0;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart_sunmit_all {
  width: 50%;
  height: 100%;
  font-size: 0.3rem;
}
.cart_submit_total {
  width: 50%;
  height: 100%;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.cart_total_num {
  width: 50%;
  height: 100%;
  font-size: 0.3rem;
  color: red;
}
.cart_total_btn {
  width: 50%;
  height: 100%;
  text-align: center;
  color: #fff;
  background-color: red;
}
</style>